<template>
  <div>
    <i class="el-icon-s-fold" v-if="isCollapse" @click="chooseMenu"></i>
    <i class="el-icon-s-unfold" v-else @click="chooseMenu"></i>

    <span class="layout-btn" @click="layout"> 退出登录 </span>
  </div>
</template>

<script lang="ts">
  import { defineComponent, toRefs, inject, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    props: {
      isCollapse: {
        type: Boolean
      }
    },
    setup: (props, context) => {
      let isCollapse = inject('isCollapse')
      const headerData = reactive({
        isCollapse
      })
      const chooseMenu = () => {
        headerData.isCollapse = !headerData.isCollapse
        context.emit('handle', headerData.isCollapse)
      }
      const router = useRouter()
      const layout = () => {
        window.sessionStorage.clear()
        router.push({
          name: 'Login'
        })
      }
      return { layout, chooseMenu, ...toRefs(headerData) }
    }
  })
</script>

<style lang="scss" scoped>
  .el-icon-s-fold,
  .el-icon-s-unfold {
    cursor: pointer;
    font-size: 20px;
  }
  .layout-btn {
    float: right;
    cursor: pointer;
  }
</style>
